<template>
	<view class="log">
		<headTop>
			<uv-navbar title="操作日志" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="tabs">
			<uv-subsection :list="list" :current="current" @change="change" activeColor="#2018B8"></uv-subsection>
		</view>
		<view class="steps">
			<uv-cell-group>
				<uv-cell v-for="item in logList" :key="item.id" :title="item.type" :value="item.city"
					:label="item.created_at" :center="true"></uv-cell>
			</uv-cell-group>
		</view>
		<view v-if="isBottom">
			<uv-divider text="已经到底了"></uv-divider>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";
	import { userApi } from "@/api/index";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	const params = ref({ page: 1, limit: 15, type: "登录" });
	const logList = ref<any>([]);
	const isBottom = ref<boolean>(false);
	const getList = async () => {
		try {
			const res = await userApi.getloglist(params.value);
			if (params.value.limit > res.list.length) {
				isBottom.value = true;
			}
			logList.value = [...logList.value, ...res.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* ------------------------------------------------------------下拉加载----------------------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});

	/* ------------------------------------------------------------跳转上一页----------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	/* ------------------------------------------------------------tabs----------------------------------------------- */
	const list = ["登录", "登出"];
	const current = ref<number>(1);
	const change = (index) => {
		current = index;
	};
</script>

<style lang="scss">
	.log {
		.steps {
			margin-top: 2vw;

			.uv-cell-group {
				background-color: rgba(255, 255, 255, 0.6) !important;
				border-radius: 2vw !important;
			}
		}
	}
</style>